<!DOCTYPE html>
<html>		
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../css/dropload.css"/>
		<link rel="stylesheet" type="text/css" href="../css/answer all the questions.css"/>
	</head>
	<body>
		
			<header class="headertop">
						<div class="lshz">
								<img src="../imgs/zuobiao.png"/>
								<span>返回</span>
						</div>
						<div class="lshc">
								<span>有问必答</span>
						</div>
						<div class="lshy">
								<img src="../imgs/nolook.png"/>
								<img src="../imgs/xie.png"/>
						</div>
			</header>
			<nav class="nav">
					<li>全部问答</li>
					<li>我发表的</li>
					<li>我关注的</li>
			</nav>
			<section class="lsmin">
				<div class="lists">
					
				</div>
				<div class="zhuanquan"><img src="../imgs/quan.png" class="xuanzhuan"/>加载中…</div>
			</section>
			<footer>
					<div class="fu">
						<img src="../imgs/shifangkuan.png"/>
							<p>服务中心</p>
					</div>
					<div>
							<img src="../imgs/xiaoxi.png"/>
							<p class="zic">有问必答</p>
					</div>
					<div class="wod">
							<img src="../imgs/geren.png"/>
							<p>我</p>
					</div>
			</footer>
        <script src="../js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="../js/dropload.min.js"></script>
        <script src="../js/answer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/flexible.debug.js"> </script>
		<script src="../js/artTemplate.js" type="text/javascript" charset="utf-8"></script>
			
        <script id="products-temp" type="text/html">
				 {{each list as v}}
                		<dl>
							<dt>
								<img src="{{v.touxiang}}">
								<h6>{{v.mingzhi}}</h6>
							</dt>
							<dd>
									<h3>{{v.biaoti}} <img src="{{v.paizao}}"/></h3>
									<p>
											{{v.shuoshuo}}
									</p>
									<p>
											<img src="{{v.fengjiang}}"/>
									</p>
									<h6>
											<time>2017-7-7&nbsp;&nbsp;15:00</time><img src="../imgs/weizhi.png"/><time>塘桥</time>
									</h6>
							</dd>
						</dl>
            {{/each}}
		</script>
        
        
         <script>
            
            $(function(){
                // 页数
                var page = 0;
                // 每页展示5个
                var size = 5;

                // dropload
                $('.lsmin').dropload({
                    scrollArea : window,
                    threshold : 50,//距离底部50的时候刷新
                    loadDownFn : function(me){
                        //console.log(me);
                        page++;
                        $.ajax({
                            type:"get",
                            url:"../json/json.json",
                            dataType:"json",
                            success: function(data){
//                                var arrLen = data.length;
//                                if(arrLen > 0){
//                                    data = data.slice(0, 5);//截取data数据
//                                   var str = template("lists",{lie: data});
                                  //console.log(str);模板数据有了
//                                  $(".sec .art .list").append($(str));//渲染到页面 
                                    
                                  // 如果没有数据
//                                }else{
//                                    // 锁定
//                                    me.lock();
//                                    // 无数据
//                                    me.noData();
//                                }
//                                me.resetload();
                                // 为了测试，延迟1秒加载
                                setTimeout(function(){
                                    // 插入数据到页面，放到最后面
                                    data = data.slice(0, 4);//截取data数据
                                    var str = template("products-temp",{list: data});
                                    $(".lists").append(str);//渲染到页面
                                    // 每次数据插入，必须重置
                                    me.resetload();
                                },1000);
                            },
                            error: function(xhr, type){
                                //alert('Ajax error!');
                                // 即使加载出错，也得重置
                                me.resetload();
                            }
                        });
                    }
                });
            });   
        </script>
			
	</body>
</html>
